<template>
    <div class="main-task-detail-view">

      <modules-title class="title-position" :titleName="title">

        <template slot="btn">
          <el-button
            plain
            size="mini"
            @click="goBack">返回</el-button>

          <div class="top-right" v-if="checkUser() && !isDisable" style="margin-left: 10px">

            <el-button type="primary" size="mini" v-if="datas.status == 0" @click="starrClick(1)">开启任务</el-button>
            <el-button type="primary" size="mini" v-if="datas.status == 2" @click="starrClick(1)">再次开启</el-button>
            <el-button type="primary" size="mini" v-if="datas.status == 1 || datas.status == 3" @click="starrClick(2)">暂停任务</el-button>
            <el-button type="primary" size="mini" v-if="datas.status == 1 || datas.status == 3 || datas.status == 5" @click="createMetting">发起会议</el-button>
            <el-button type="primary" size="mini" v-if="(datas.status == 1 || datas.status == 3 || datas.status == 5) && datas.mandatory_check && isEndBtn" @click="finishOrCheck(4)">提交验收</el-button>
            <el-button type="primary" size="mini" v-else-if="(datas.status == 1 || datas.status == 3) && isEndBtn" @click="finishOrCheck(6)">结束任务</el-button>
            <el-button type="primary" size="mini" @click="changeClick" v-if="!datas.is_apply && datas.status < 6 && datas.status != 4 && datas.status != 2">变更申请</el-button>

          </div>
        </template>

      </modules-title>

      <div class="pj-content">

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="infomation">

            <details-view :datas="datas" :project-name="datas.project_name" :members="members" :disbale="isDisable" @refreshData="refreshData"></details-view>

          </el-tab-pane>
          <el-tab-pane label="工作计划" name="plan">
            <plan-view ref="plan" :datas="datas" :project-id="datas.project_id" :disbale="isDisable"></plan-view>
          </el-tab-pane>
          <el-tab-pane label="任务问题" name="problem">
            <problem-view ref="problem" :datas="datas" :project-id="datas.project_id" :project-name="datas.project_name" :is-disbale="isDisable"></problem-view>
          </el-tab-pane>
          <el-tab-pane label="任务文档" name="document">
            <task-document-view ref="document" :datas="datas" :disbale="isDisable"></task-document-view>
          </el-tab-pane>
        </el-tabs>

        <div v-if="tableData.length && activeName == 'infomation'" style="margin-top: 20px">
          <item-title title="变更记录"></item-title>

          <el-table
            size="medium"
            :data="tableData"
            @row-click="changeTableRowClick"
            style="width: 100%">
            <el-table-column
              align="center"
              prop="SerialNumber"
              label="变更编号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="change_type"
              label="变更类型">
              <template slot-scope="scope">
                <span v-if="scope.row.code == 'QualitySource'">质量标准审批</span>
                <span v-else-if="scope.row.code == 'StabilityScheme'">稳定性方案审批</span>
                <span v-else-if="scope.row.code == 'ExchangeStability'">更换稳定性箱审批</span>
                <span v-else-if="scope.row.code == 'BuildProject'">立项审批</span>
                <span v-else-if="scope.row.code == 'Resolutions'">立项决议审批</span>
                <span v-else-if="scope.row.code == 'CheckResult'">检验结果审批</span>
                <span v-else-if="scope.row.code == 'RepealCheck'">撤销检验审批</span>
                <span v-else-if="scope.row.code == 'ApprovalCheck'">请验审批</span>
                <span v-else-if="scope.row.code == 'RetainDestroy'">留样销毁审批</span>
                <span v-else-if="scope.row.code == 'ProblemAcceptance'">问题验收</span>
                <span v-else-if="scope.row.code == 'ChangeProjectInfo'">项目信息变更</span>
                <span v-else-if="scope.row.code == 'ChangeProjectMember'">项目成员变更</span>
                <span v-else-if="scope.row.code == 'ChangeProjectTask'">项目任务变更</span>
                <span v-else-if="scope.row.code == 'ProjectPause'">项目暂停</span>
                <span v-else-if="scope.row.code == 'ProjectStop'">项目终止</span>
                <span v-else-if="scope.row.code == 'ProjectFirstCheck'">项目方案书</span>
                <span v-else-if="scope.row.code == 'ProjectPlanCheck'">项目计划审批</span>
                <span v-else-if="scope.row.code == 'ProjectEndCheck'">项目结题验收</span>
                <span v-else-if="scope.row.code == 'TaskCheck'">任务验收</span>
                <span v-else-if="scope.row.code == 'ChangeProjectMulTask'">任务批量变更</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="reason"
              label="变更原因">
              <template slot-scope="scope">
                <span>{{scope.row.reason ? scope.row.reason : scope.row.description}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="变更时间">
              <template slot-scope="scope">
                <span>{{scope.row.created_at?dateFormat1('yyyy-mm-dd',scope.row.created_at):''}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="creator_name"
              label="发起人">
              <template slot-scope="scope">
                <span>{{scope.row.creator_name}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>


<!--        <div v-if="operationList.length && activeName == 'infomation' " style="margin-top: 20px">-->
<!--          <item-title title="操作日志"></item-title>-->

<!--          <history-view :datas="operationList" :to="{name:'projectAuditDetail'}"></history-view>-->

<!--          <pagination style="display:flex;justify-content:flex-end;" :total="total" :page.sync="pageNum"-->
<!--                      :limit.sync="pageSize" @pagination="getOperationRecords" />-->
<!--        </div>-->

        <el-tabs v-model="activeName2" v-if="activeName == 'infomation' " style="margin-top: 20px">
          <el-tab-pane name="1">
            <div slot="label">
              <i style="margin-right: 5px" /><span>操作日志</span>
            </div>
            <div class="tab-content">
              <history-view :datas="operationList" :to="{name:'projectAuditDetail'}"></history-view>

              <pagination style="display:flex;justify-content:flex-end;" :total="total" :page.sync="pageNum"
                          :limit.sync="pageSize" @pagination="getOperationRecords" />
            </div>
          </el-tab-pane>
          <el-tab-pane name="2">
            <div slot="label">
              <i style="margin-right: 5px" /><span>会议记录</span>
            </div>
            <div class="tab-content">
              <meeting-view :datas="meetingList"></meeting-view>

              <pagination style="display:flex;justify-content:flex-end;" :total="total1" :page.sync="pageNum1"
                          :limit.sync="pageSize1" @pagination="getMeetingData" />
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>

      <el-dialog
        title="任务变更申请"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose">

        <change-task-view ref="changeView" :members="members" :project-name="datas.project_name"></change-task-view>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">提交审批</el-button>
      </span>
      </el-dialog>

    </div>
</template>

<script>
  import meetingView from "../../project/details/modules/meetingView";
  import changeTaskView from "../../project/details/modules/taskListView/modules/changeTaskView";
  import taskDocumentView from "../../project/details/modules/taskListView/modules/taskDocumentView";
  import problemView from "../../project/details/modules/taskListView/modules/problemView";
  import planView from "../../project/details/modules/taskListView/modules/planView";
  import detailsView from "../../project/details/modules/taskListView/modules/detailsView";

    export default {
        name: "index",
        components:{detailsView,planView,problemView,taskDocumentView,changeTaskView,meetingView},
        data:function () {
            return{
                title:'任务详情',
                dialogVisible:false,
                isDisable:false,
                datas:{},
                activeName:"infomation",
                members:[],
                operationList:[],
                tableData:[],

                pageNum:1,
                pageSize:10,
                total:0,
                squareUrl:'',
                isEndBtn:true,

                activeName2:'1',

                pageNum1:1,
                pageSize1:10,
                total1:0,
                meetingList:[],
            }
        },
        mounted:function() {
            if (this.$route.query.id){
                this.getData(this.$route.query.id)
            }
        },
        methods:{
            starrClick:function(state){
                let str = ''
                if (state == 1){
                    str = '是否确认开启此任务?'
                }else{
                    str = '是否确认暂停此任务?'
                }
                this.$confirm(str , '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.changeStatus(state)

                }).catch(() => {

                });
            },
            checkUser:function(){
                if (this.datas && this.datas.person_in_charge && this.datas.person_in_charge.member_id == this.$store.getters.userInfo.user.id){
                    return true;
                }else {
                    return false;
                }
            },
            changeTableRowClick:function(row, column, event){
                this.$router.push({name:'projectAuditDetail',query:{id:row.flow_id}});
            },
            goBack:function(){
                this.$router.back();
            },
            refreshData:function(){
                this.$route.params.refresh = true;
                this.getData(this.$route.query.id)
            },
            getData:function (id) {
                this.$api.PROJECT_START_TASK_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.datas = res.data;
                        this.datas.persons = []
                        if (this.datas.person_in_charge){
                            this.datas.persons.push(this.datas.person_in_charge.member_id)
                        }
                        if (this.datas.status == 7){
                            this.isDisable = true;
                        }else{
                            this.isDisable = false;
                        }

                        this.checkEnd();
                        this.getStatus()
                        this.getMembers();
                        this.getOperationRecords();
                        this.getMeetingData();
                        this.getChangeList();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            getStatus:function(){
                this.title = '任务详情';

                let str = '未启动'
                switch (this.datas.status) {
                    case 0:
                        str = "未启动";
                        break;
                    case 1:
                        str = "进行中";
                        break;
                    case 2:
                        str = "暂停";
                        break;
                    case 4:
                        str = "待验收";
                        break;
                    case 5:
                        str = "验收不通过";
                        break;
                    case 6:
                        str = "已完成";
                        break;
                    case 7:
                        str = "已终止";
                        break;
                }

                this.title = this.title + "(" + str + ")"

            },
            getMembers:function(){
                this.$api.PROJECT_MANAGER_PROJECT_DETAIL(this.datas.project_id).then(res=>{
                    if (res.code == 200){
                        if (res.data.status == 8 || res.data.status == 9 || res.data.status == 71 || res.data.status == 53){
                            this.isDisable = true;
                        }
                        if (!this.datas.parent_id){
                            this.members = res.data.member;
                        }

                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
                if (this.datas.parent_id){
                    this.$api.PROJECT_START_TASK_DETAIL(this.datas.parent_id).then(res=>{
                        if (res.code == 200){

                            this.members = res.data.task_member;
                        }else {
                            this.$message.error(res.msg)
                        }
                    }).catch(err=>{

                    })
                }

            },
            getMeetingData:function () {
                let data = {
                    key:'',
                    type:'',
                    meeting_type:'',
                    project_id:'',
                    task_id:this.datas.id,
                    i_create:0,
                    creator_id:'',
                    value:[],
                    pager:{
                        limit:this.pageSize1,
                        skip:this.pageNum1,
                        OrderBy:'',
                        OrderMethod:-1
                    },
                };
                this.$api.PROJECT_START_MEETING_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.meetingList = res.data.data;
                        this.total1 = res.data.total
                    }
                })
            },
            getOperationRecords:function () {

                let data = {
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_OPERATION_LIST(this.datas.id,data).then(res=>{
                    if (res.code == 200){
                        this.operationList = res.data.data;
                        this.total = res.data.total;
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            getChangeList:function(){
                let data = {
                    project_id:this.datas.project_id,
                    start_time:'',
                    end_time:'',
                    change_type:0,
                    object_id:this.datas.id,
                    pager:{
                        limit:100,
                        skip:1,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_CHANGE_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            handleClick:function () {
                if (this.activeName == "plan"){
                    if (this.$refs.plan){
                        this.$refs.plan.getListData();
                    }
                }else if (this.activeName == "problem"){
                    if (this.$refs.problem){
                        this.$refs.problem.getListData();
                    }
                }else if (this.activeName == "document"){

                }
            },
            changeStatus:function (status) {

                let data = {
                    id:this.datas.id,
                    status:status
                }

                this.$api.PROJECT_START_TASK_STATUS(data).then(res=>{
                    if (res.code == 200){
                        this.datas.status = status;

                        this.getOperationRecords()
                        this.getMeetingData();
                        this.refreshData()
                    }else {
                        this.$message.error(res.msg);
                    }
                }).catch(err=>{

                })
            },
            checkEnd:function(){
                if (this.datas.children && this.datas.children.length){
                    let b = true;
                    for (let i = 0; i < this.datas.children.length; i++){
                        if (this.datas.children[i].status != 6){
                            b = false;
                            break;
                        }
                    }

                    this.isEndBtn = b
                }else {
                    this.isEndBtn = true
                }
            },
            createMetting:function(){
                this.$comFun.goMeetingCreate(4,{name:this.datas.project_name,id:this.datas.project_id},{name:this.datas.task_name,id:this.datas.id})
            },
            finishOrCheck:function(status){
                if (this.datas.children && this.datas.children.length){
                    let b = true;
                    let name = ""
                    for (let i = 0; i < this.datas.children.length; i++){
                        if (this.datas.children[i].status != 6){
                            b = false;
                            name = this.datas.children[i].task_name
                            break;
                        }
                    }
                    if (!b){
                        this.$message.error("请先完成任务：" + name)
                        return;
                    }
                }
                if (this.datas.files){
                    let b = true;
                    let name = ""
                    for (let i = 0; i < this.datas.files.length; i++){
                        let file = this.datas.files[i]
                        if (!file.file || !file.file.id){
                            b = false;
                            name = file.file_name
                            break;
                        }
                    }
                    if (!b){
                        this.$message.error("请先提交任务文档：" + name)
                        return;
                    }
                }

                let str = ""
                if (status == 4){
                    str = "是否确认提交任务验收?"
                }else {
                    str = "是否确认结束任务?"
                }
                this.$confirm(str, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.changeStatus(status);

                }).catch(() => {

                });

            },
            changeClick:function () {
                this.dialogVisible = true;
                setTimeout(() => {
                    if (this.$refs.changeView){
                        this.$refs.changeView.setData(this.datas)
                    }
                },500)
            },
            handleClose:function () {
                this.dialogVisible = false;
            },
            confirmClick:function () {

                if (this.$refs.changeView){

                    this.$refs.changeView.validateForm().then(()=>{

                        let data = {
                            object_id:this.datas.id,
                            project_id:this.datas.project_id,
                            project_name:this.datas.project_name,
                            change_type:3,
                            reason_id:this.$refs.changeView.datas.change_cause_id,
                            reason:this.$refs.changeView.datas.change_cause,
                            description:this.$refs.changeView.datas.details_describe,
                            level_id:this.$refs.changeView.datas.change_level_id,
                            level:this.$refs.changeView.datas.change_level,
                            change_describe:this.$refs.changeView.datas.change_describe,
                            task_after:{
                                is_update_task_time:Number(this.$refs.changeView.datas.is_update_task_time),
                                start_date:this.$refs.changeView.datas.start_date,
                                end_date:this.$refs.changeView.datas.end_date,
                                duration:this.$refs.changeView.datas.duration,
                                person_in_charge:this.$refs.changeView.datas.person_in_charge,
                                task_member_id:this.$refs.changeView.datas.task_member_id,
                                task_member:this.$refs.changeView.datas.task_member,
                            }
                        }

                        this.$api.PROJECT_START_CHANGE_CREATE(data).then(res=>{
                            if (res.code == 200){
                                this.datas.is_apply = 1;
                                this.$message.success("提交成功")

                                this.pageNum = 1;
                                this.getOperationRecords()
                                this.getMeetingData();
                                //this.getChangeList();
                                this.refreshData()
                                this.dialogVisible = false;
                            }else {
                                this.$message.error(res.msg);
                            }
                        }).catch(err=>{

                        })

                    })

                }else{
                    this.dialogVisible = false;
                }

            },
        }
    }
</script>

<style lang="scss">
  @import "../../../../assets/scss/views/projectManagement/taskList/details.scss";

</style>
